<template>
    <div id="roleList">
        <el-card class="mg-b-10">
            <div class="layout-top">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="grid-content">
                            <el-input size="mini" type="text" v-model="searchName" placeholder="请输入查询条件" suffix-icon="el-icon-search"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            <el-select class="select-prefix" size="mini" v-model="status" placeholder="请选择角色状态" filterable>
                                <template slot = "prefix">
                                    <span class = 'prefixSlot'>角色状态</span>
                                </template>
                                <el-option
                                    v-for="item in $Options.commonStatus"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content layout-right">
                             <el-button type="primary" size="mini" @click="isShow=true">添加角色</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <el-card>
            <el-table :data="tableData" stripe border >
                
                <el-table-column label="角色id" prop="roleId" ></el-table-column>
                <el-table-column label="名称" prop="roleName" ></el-table-column>
                <el-table-column label="状态" width="150">
                    <template slot-scope="scope">
                        <el-tag  :type="scope.row.isLocked === 0 ? 'success' : 'danger'" size="small">
                            {{scope.row.isLocked === 0 ? '启用' : scope.row.isLocked == 1 ? '停用' : ''}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="角色编码" prop= "roleCode"></el-table-column>
                <el-table-column label="创建时间" prop= "gmtCreate"></el-table-column>
                <el-table-column  label="操作" width="80">
                    <template slot-scope="scope">
                        <el-dropdown size="small" type="text" trigger="click" placement="bottom-start" v-if="scope.row.roleCode != 'sa'">
                            <span class="el-dropdown-link" style="font-size: 12px; cursor: pointer">
                                操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown" >
                                <el-dropdown-item command="a" @click.native="handleDisabledUser(scope.row)">{{scope.row.isLocked === 0 ? '停用' : scope.row.isLocked === 1 ? '启用' : ''}}</el-dropdown-item>
                                <el-dropdown-item command="b" @click.native="handleEditRole(scope.row)" >编辑</el-dropdown-item>
                                <el-dropdown-item command="b" @click.native="handleEditPowers(scope.row)" >权限</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <page :total="total" :page="page" :size="size" @handlepagechange="handlePageChange" @handleSizeChange="handleSizeChange"></page>
        </el-card>
        <editRolePowers v-if="editPower" :editPower="editPower" :roleId="roleId" @cancelShow="cancelShow" @getRoleList="getRoleList"></editRolePowers>
        <editRole v-if="isShow" :isShow="isShow" :type="type" :roleId="roleId" @cancelShow="cancelShow" @getRoleList="getRoleList"></editRole>
    </div>
</template>
<script>
    import page from '../../commonComponents/page'
    import editRolePowers from './editRolePowers'
    import editRole from './editRole'
    export default {
        components: {page, editRolePowers, editRole},
        data() {
            return {
                page: 1,
                size: 10,
                total: 0,
                status: '',
                searchName: '',
                tableData: [],
                editPower: false,
                roleId: '',
                dialogVisible: false,
                form: {
                    roleName: '',
                    roleCode: ''
                },
                isShow: false,
                type: 'add'
            }
        },
        mounted() {
            this.getRoleList()
        },
        methods: {
            getRoleList() {
                try{
                    let params= {
                        page: this.page,
                        size: this.size
                    }
                    this.$server.systemControlApi.getSystemRoleList(params).then(res => {
                        this.tableData= res.data
                        this.total= res.total
                    })
                }catch(err){this.$paramsError(err)}
            },
            handlePageChange(page) {
                this.page= page
                this.getRoleList()
            },
            handleSizeChange(size) {
                this.size= size
                this.getRoleList()
            },
            /** 禁用用户 */
            handleDisabledUser(scope) {
                let obj;
                if(scope.isLocked === 0) {
                    obj= {
                        isLocked: 1,
                        roleId: scope.roleId
                    }
                }else{
                    obj= {
                        isLocked: 0,
                        roleId: scope.roleId
                    }
                }
                this.changeRoleStatus(obj)
            },
            handleEditPowers(scope) {
                this.editPower= true
                this.roleId= scope.roleId
            },
            cancelShow(title) {
                this.editPower= title
                this.isShow= title
            },
            handleEditRole(scope) {
                this.type= 'edit'
                this.roleId= scope.roleId
                this.isShow= true
            },
            changeRoleStatus(obj) {
                try{
                    let params= {
                        isLocked: obj.isLocked,
                        roleId: obj.roleId
                    }
                    this.$server.systemControlApi.changeRoleStatus(params).then(res => {
                        this.getRoleList()
                    })
                }catch(err) {this.$paramsError(err)}
            },
           
        }
    }
</script>